<template>
  <Dialog
    :visible="visible"
    modal
    header="编辑流程分类"
    :style="{ width: '500px' }"
    :closable="true"
    :draggable="false"
    @update:visible="$emit('update:visible', $event)"
    @hide="handleClose"
  >
    <div class="category-form">
      <form @submit.prevent="handleSubmit">
        <div class="form-row">
          <div class="form-item full-width">
            <label class="form-label required">分类名称</label>
            <InputText
              v-model="formData.categoryName"
              placeholder="请输入分类名称"
              :class="{ 'p-invalid': errors.categoryName }"
            />
            <small v-if="errors.categoryName" class="p-error">{{ errors.categoryName }}</small>
          </div>
        </div>

        <div class="form-row">
          <div class="form-item full-width">
            <label class="form-label">父级分类</label>
            <Dropdown
              v-model="formData.parentId"
              :options="categoryOptions"
              option-label="label"
              option-value="value"
              placeholder="请选择父级分类"
              size="small"
            />
          </div>
        </div>
      </form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <Button
          label="取消"
          severity="secondary"
          @click="handleClose"
          :disabled="loading"
        />
        <Button
          label="确定"
          severity="primary"
          @click="handleSubmit"
          :loading="loading"
        />
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import Dialog from 'primevue/dialog'
import Button from 'primevue/button'
import InputText from 'primevue/inputtext'
import Dropdown from 'primevue/dropdown'

interface CategoryData {
  categoryId: number
  categoryName: string
  parentId: number
}

interface Props {
  visible: boolean
  categoryData?: CategoryData | null
  categoryOptions?: any[]
  loading?: boolean
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'submit', data: any): void
  (e: 'close'): void
}

const props = withDefaults(defineProps<Props>(), {
  categoryData: null,
  categoryOptions: () => [],
  loading: false
})

const emit = defineEmits<Emits>()

// 表单数据
const formData = reactive({
  categoryId: 0,
  categoryName: '',
  parentId: 0
})

// 表单验证错误
const errors = reactive({
  categoryName: ''
})

// 监听visible和categoryData变化
watch([() => props.visible, () => props.categoryData], ([newVisible, newCategoryData]) => {
  if (newVisible && newCategoryData) {
    loadCategoryData(newCategoryData)
  } else if (newVisible) {
    resetForm()
  }
})

// 加载分类数据
const loadCategoryData = (categoryData: CategoryData) => {
  Object.assign(formData, {
    categoryId: categoryData.categoryId,
    categoryName: categoryData.categoryName,
    parentId: categoryData.parentId
  })
  
  // 重置错误信息
  Object.keys(errors).forEach(key => {
    errors[key as keyof typeof errors] = ''
  })
}

// 重置表单
const resetForm = () => {
  Object.assign(formData, {
    categoryId: 0,
    categoryName: '',
    parentId: 0
  })
  
  Object.keys(errors).forEach(key => {
    errors[key as keyof typeof errors] = ''
  })
}

// 表单验证
const validateForm = () => {
  let isValid = true
  
  // 重置错误信息
  Object.keys(errors).forEach(key => {
    errors[key as keyof typeof errors] = ''
  })
  
  // 分类名称验证
  if (!formData.categoryName.trim()) {
    errors.categoryName = '请输入分类名称'
    isValid = false
  } else if (formData.categoryName.length < 2) {
    errors.categoryName = '分类名称至少2个字符'
    isValid = false
  }
  
  return isValid
}

// 处理提交
const handleSubmit = () => {
  if (!validateForm()) {
    return
  }
  
  emit('submit', { ...formData })
}

// 处理关闭
const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}
</script>

<style scoped>
.category-form {
  padding: 20px 0;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-item.full-width {
  flex: 1 1 100%;
}

.form-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.form-label.required::after {
  content: ' *';
  color: #ff4d4f;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 表单组件样式覆盖 */
:deep(.p-inputtext),
:deep(.p-dropdown) {
  height: 40px;
  font-size: 14px;
}

:deep(.p-error) {
  font-size: 12px;
  margin-top: 4px;
}

/* 下拉框选项字体样式 */
:deep(.p-dropdown-panel .p-dropdown-items .p-dropdown-item) {
  font-size: 14px !important;
  line-height: 20px !important;
  padding: 8px 12px !important;
}

/* 下拉框placeholder样式 */
:deep(.p-dropdown .p-dropdown-label.p-placeholder) {
  font-size: 14px !important;
  line-height: 20px !important;
  color: #6c757d !important;
}
</style>
